import React, {useEffect, useState} from "react";
import {
    DrawerUpdateRoleProp,
    PermissionTreeProp,
    UpdatePermissionFormProp,
    UpdateRoleFormProp
} from "@/pages/authority/modules";
import {Button, Drawer, Form, Input, message, Space, Spin, Tree} from "antd";
import {permissionTree} from "@/api/permission";
import {updateRole} from "@/api/role";

const UpdateRole: React.FC<DrawerUpdateRoleProp> = ({visible, roleData, close}) => {

    const [treeData, setTreeData] = useState<PermissionTreeProp[]>([]);
    const [checkedKeys, setCheckKeys] = useState<number[]>([]);
    const [spinning, setSpinning] = useState<boolean>(false);
    const [form] = Form.useForm<UpdateRoleFormProp>();

    const submitForm = () => {
        form.validateFields().then(value => {
            setSpinning(true);
            updateRole({...value, permId: checkedKeys}).then(res => {
                message.success('修改成功')
                close(true, res)
            }).finally(() => setSpinning(false))
        })
    }

    const loadTree = async () => {
        const tree = await permissionTree(0, true);
        setTreeData(tree);
    }

    const changeChecked = (keys: {checked: React.Key[], halfChecked: React.Key[]}) => {
        console.log("keys", keys)
        setCheckKeys(keys.checked as number[])
    }

    useEffect(() => {
        if (visible) {
            console.log("roleData => ", roleData);
            form.setFieldsValue({
                ...form.getFieldsValue(),
                id: roleData?.id,
                name: roleData?.name,
                code: roleData?.code,
                brief: roleData?.brief
            })
            setCheckKeys(roleData?.permIds ? roleData.permIds : [])
            loadTree()
        }
        return () => {
            setTreeData([])
            setCheckKeys([])
        }
    }, [visible])

    return <Drawer
        width={450}
        title="角色编辑"
        placement="right"
        onClose={() => close(false)}
        open={visible}
        extra={
            <Space>
                <Button type="primary" danger onClick={()=> close(false)}>取消</Button>
                <Button type="primary" onClick={() => submitForm()}>保存</Button>
            </Space>
        }
    >
        <Spin spinning={spinning} tip="加载数据中......">
            <Form labelCol={{ span: 5 }}
                  wrapperCol={{ span: 19 }}
                  form={form}
                  layout="horizontal"
                  name="form_in_modal"
            >
                <Form.Item name="id" style={{display: 'none'}}><Input /></Form.Item>
                <Form.Item name="name" label="角色名称" rules={[{ required: true, message: '请输入角色名称' }]}>
                    <Input placeholder="请输入角色名称" />
                </Form.Item>
                <Form.Item name="code" label="角色编码" rules={[{ required: true, message: '请输入角色鞭名马' }]}>
                    <Input placeholder="请输入角色编码" />
                </Form.Item>
                <Form.Item name="brief" label="角色描述">
                    <Input placeholder="请输入角色描述" />
                </Form.Item>
                <Form.Item name="PermId" label="角色授权" >
                    <Tree
                        style={{marginTop: 5}}
                        checkable
                        checkStrictly
                        treeData={treeData}
                        defaultExpandAll
                        checkedKeys={checkedKeys}
                        onCheck={(checkedKeys) => changeChecked(checkedKeys as {checked: React.Key[], halfChecked: React.Key[]})}
                    />
                </Form.Item>
            </Form>
        </Spin>
    </Drawer>
}


export default UpdateRole;